<template>
  <div class="anomaly-card">
    <div class="card-content">
      <!-- 异常描述卡片 -->
      <div class="info-card full-width" :class="{ 'filled': formData.anomalyDescription }">
        <div class="fill-indicator"></div>
        <div class="card-label">
          异常描述
          <el-tooltip content="详细描述观察到的异常现象，包括异常表现、持续时间、影响范围等。支持Markdown格式，如**粗体**、*斜体*、列表等。" placement="top">
            <i class="el-icon-question help-icon"></i>
          </el-tooltip>
        </div>
        <div class="card-content-area">
          <MarkdownRenderer
            v-model="formData.anomalyDescription"
            :editable="true"
            :collapsible="false"
            label="异常描述"
            placeholder="详细描述异常现象，支持Markdown语法..."
            :rows="4"
          />
        </div>
      </div>

      <!-- 异常类型卡片 -->
      <div class="info-card" :class="{ 'filled': formData.anomalyType }" @click.stop="openTypeDialog">
        <div class="fill-indicator"></div>
        <div class="card-label">
          异常类型
          <el-tooltip content="根据异常现象选择对应的类型分类，有助于快速定位问题原因和制定解决方案。" placement="top">
            <i class="el-icon-question help-icon"></i>
          </el-tooltip>
        </div>
        <div class="card-value" v-if="formData.anomalyType">
          {{ getAnomalyTypeLabel(formData.anomalyType) }}
        </div>
        <div class="card-placeholder" v-else>
          点击选择异常类型
        </div>

      </div>

      <!-- 受影响轴向卡片 -->
      <div class="info-card" :class="{ 'filled': formData.affectedAxis && formData.affectedAxis.length }" @click.stop="openAxisDialog">
        <div class="fill-indicator"></div>
        <div class="card-label">
          受影响轴向
          <el-tooltip content="选择受到异常影响的设备轴向（X轴、Y轴、Z轴）。如果是从监控页面跳转，会根据传感器位置自动选择。" placement="top">
            <i class="el-icon-question help-icon"></i>
          </el-tooltip>
        </div>
        <div class="card-value" v-if="formData.affectedAxis && formData.affectedAxis.length">
          {{ formData.affectedAxis.join(', ') }}
        </div>
        <div class="card-placeholder" v-else>
          点击选择轴向
        </div>

      </div>
    </div>

    <!-- 异常描述已改为内联Markdown编辑器 -->

    <!-- 异常类型弹窗 -->
    <el-dialog
      title="异常类型"
      :visible.sync="typeDialogVisible"
      width="500px"
      :close-on-click-modal="false"
      :before-close="() => closeDialog('type')">
      <el-select
        v-model="tempType"
        filterable
        placeholder="请选择异常类型"
        style="width: 100%">
        <el-option-group
          v-for="group in anomalyTypes"
          :key="group.label"
          :label="group.label">
          <el-option
            v-for="item in group.options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-option-group>
      </el-select>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog('type')">取消</el-button>
        <el-button type="primary" @click="saveType">确定</el-button>
      </div>
    </el-dialog>

    <!-- 轴向选择弹窗 -->
    <el-dialog
      title="受影响轴向"
      :visible.sync="axisDialogVisible"
      width="400px"
      :close-on-click-modal="false"
      :before-close="() => closeDialog('axis')">
      <el-checkbox-group v-model="tempAxis">
        <el-checkbox label="X">X轴</el-checkbox>
        <el-checkbox label="Y">Y轴</el-checkbox>
        <el-checkbox label="Z">Z轴</el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog('axis')">取消</el-button>
        <el-button type="primary" @click="saveAxis">确定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import FormSection from './FormSection.vue';
import dialogMixin from '@/mixins/dialogMixin'

export default {
  name: 'AnomalyInfoForm',
  mixins: [dialogMixin],
  components: { FormSection },
  props: {
    formData: {
      type: Object,
      required: true
    },
    rules: {
      type: Object,
      required: true
    },
    anomalyTypes: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      typeDialogVisible: false,
      axisDialogVisible: false,
      tempType: '',
      tempAxis: []
    }
  },
  methods: {
    validate() {
      // 简单验证必填字段
      if (!this.formData.anomalyDescription) {
        this.$message.error('请填写异常描述');
        return Promise.reject();
      }
      if (this.formData.anomalyType === undefined || this.formData.anomalyType === null || this.formData.anomalyType === '') {
        this.$message.error('请选择异常类型');
        return Promise.reject();
      }
      return Promise.resolve();
    },

    // openDescriptionDialog 已移除，改为内联Markdown编辑器

    openTypeDialog() {
      this.safeOpenDialog(() => {
        this.tempType = this.formData.anomalyType || '';
        this.typeDialogVisible = true;
      });
    },

    openAxisDialog() {
      this.safeOpenDialog(() => {
        this.tempAxis = [...(this.formData.affectedAxis || [])];
        this.axisDialogVisible = true;
      });
    },

    closeDialog(type) {
      this.safeCloseDialog(() => {
        switch(type) {
          case 'type':
            this.typeDialogVisible = false;
            break;
          case 'axis':
            this.axisDialogVisible = false;
            break;
        }
      });
    },

    // saveDescription 已移除，改为内联Markdown编辑器

    saveType() {
      // 直接保存字典原始值，保持与系统字典一致
      this.formData.anomalyType = this.tempType;
      this.closeDialog('type');
    },

    saveAxis() {
      this.formData.affectedAxis = [...this.tempAxis];
      this.closeDialog('axis');
    },

    // 根据字典数据获取异常类型的标签
    getAnomalyTypeLabel(value) {
      if (!value && value !== 0) return '';
      const allOptions = this.anomalyTypes.flatMap(group => group.options);

      // 尝试数字匹配和字符串匹配
      const match = allOptions.find(opt =>
        opt.value === value ||
        Number(opt.value) === Number(value) ||
        String(opt.value) === String(value)
      );

      console.log("🔍 异常类型标签查找:", {
        输入值: value,
        输入类型: typeof value,
        可用选项: allOptions.map(opt => ({ value: opt.value, type: typeof opt.value, label: opt.label })),
        匹配结果: match
      });

      return match ? match.label : value;
    },

    handleDescriptionClose() {
      this.closeDialog('description');
    }
  }
}
</script>

<style scoped>
.warning-section {
  border-left: 3px solid #e6a23c;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.header-tags {
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-header h2 {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin: 0;
}

.option-label {
  margin-right: 8px;
}

.option-count {
  color: #909399;
  font-size: 12px;
}

/* 异常信息卡片容器 */
.anomaly-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  user-select: none;
  flex: 1;
  display: flex;
  flex-direction: column;
}



/* 卡片内容 */
.card-content {
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  flex: 1;
}

/* 信息卡片 */
.info-card {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 12px 12px 20px;
  cursor: pointer;
  position: relative;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  user-select: none;
}

/* 填写状态指示器 */
.fill-indicator {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #e2e8f0;
  border-radius: 12px 0 0 12px;
  transition: all 0.3s ease;
}

.info-card.filled .fill-indicator {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}



.card-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.help-icon {
  font-size: 14px;
  color: #9ca3af;
  cursor: help;
  transition: color 0.2s ease;
}

.help-icon:hover {
  color: #6b7280;
}

.card-value {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.5;
  flex: 1;
}

.card-placeholder {
  font-size: 14px;
  color: #94a3b8;
  font-style: italic;
  flex: 1;
}

.card-content-area {
  margin-top: 8px;
}



/* 弹窗样式 */
.clean-textarea >>> .el-textarea__inner {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  padding: 12px;
}

.clean-textarea >>> .el-textarea__inner:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 弹窗z-index修复 */
.el-dialog__wrapper {
  z-index: 3000 !important;
}

.el-overlay {
  z-index: 2999 !important;
}

/* 下拉选择器z-index修复 */
.el-select-dropdown {
  z-index: 3001 !important;
}

.el-popper {
  z-index: 3001 !important;
}

.dialog-footer {
  text-align: right;
}

.dialog-footer .el-button {
  border-radius: 8px;
  font-weight: 500;
  padding: 8px 16px;
}

.dialog-footer .el-button--primary {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border: none;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}



/* 响应式设计 */
@media (min-width: 768px) {
  .card-content {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .info-card:first-child {
    grid-column: 1 / -1;
  }
}
</style> 